<template>
    <el-row align="middle" class="loginOuter">
        <el-col :span="8" :offset="8">
            <el-card class="box-card">
                <h2 style="text-align:center;color:#eb5753;font-family:'幼圆'">美可玩故事后台登录系统</h2>
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                    class="demo-ruleForm">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>


</template>

<script setup>
import { reactive, ref } from 'vue'
import { userLogin } from '../api/user.js'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const ruleFormRef = ref()
const store = useStore()
const router = useRouter()

const validateName = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入账号'))
    } else {
        callback()
    }
}


const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}


const ruleForm = reactive({//这里示表单的双向绑定数据
    username: '',
    password: '',
})

const rules = reactive({//验证规则 validator:本条规则触发的验证函数 trigger:本条规则触发的时机
    username: [{ validator: validateName, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
})

const submitForm = (formEl) => {
    if (!formEl) return
     formEl.validate((valid) => {
        userLogin(ruleForm).then(res => {
            // let requit = res.data.rolename
            // console.log(res.data.rolename)
            store.commit('user/initInfoMut', res.data)
            localStorage.setItem('userInfo', JSON.stringify(res.data))//本地存储用户信息
            router.push('/')
           
        })


    })


}


const resetForm = (formEl) => {

    if (!formEl) return

    formEl.resetFields()
    console.log(5)
}
</script>


<style scoped>
.loginOuter {
    height: 100vh;
    background: url(../assets/images/loginBackground.png) no-repeat center/cover
}

.box-card {
    box-shadow: 0 0.3px 0.7px rgb(0 0 0 / 13%), 0 0.9px 1.7px rgb(0 0 0 / 18%), 0 1.8px 3.5px rgb(0 0 0 / 22%), 0 3.7px 7.3px rgb(0 0 0 / 28%), 0 10px 20px rgb(0 0 0 / 40%);
    backdrop-filter: blur(20px);
    transition: 0.5s ease;
    background: transparent;
    font-family: '幼圆'

}

.box-card:hover {
    box-shadow: 0 0.7px 1px rgb(0 0 0 / 16%), 0 1.7px 2.6px rgb(0 0 0 / 22%), 0 3.5px 5.3px rgb(0 0 0 / 28%), 0 7.3px 11px rgb(0 0 0 / 35%), 0 20px 30px rgb(0 0 0 / 50%);
}

.box-card :deep(.el-form-item__label) {
    color: #ec7196;
    font-weight: 600;
}

/* .loginTitle {
    border: 1px solid red
} */
</style>
